<template>
  <div class="app-container">
    <ZlTable ref="table" url="/sys/blackList/list" :param.sync="par">
      <template slot="search">
        <el-form :inline="true" :model="par" class="left">
          <el-form-item label="ip" prop="userName">
            <el-input v-model="par.host" clearable placeholder="输入ip" />
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" size="small" @click="query">搜 索</el-button>
          </el-form-item>
        </el-form>
      </template>
      <template slot="toolbar">
        <el-row :gutter="10" class="mb10">
          <el-col :span="1.5">
            <el-button size="small" plain type="primary" icon="el-icon-plus" @click="addData">新 增</el-button>
          </el-col>
        </el-row>
      </template>
      <template slot="cols">
        <el-table-column align="center" width="50px" type="index" :index="indexMethod" />
        <el-table-column prop="host" label="ip" min-width="150px" />
        <el-table-column prop="reason" label="封禁原因" min-width="150px" show-overflow-tooltip />
        <el-table-column prop="status" label="状态" width="80px" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 0" type="success">未封禁</el-tag>
            <el-tag v-else type="danger">封禁</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createDt" label="封禁时间" min-width="100px" />
        <el-table-column prop="releaseDt" label="解封时间" min-width="100px">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.releaseDt ==null" type="danger">永久</el-tag>
            <span>{{ scope.row.releaseDt }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="100px">
          <template slot-scope="scope">
            <el-button
              title="编辑"
              type="primary"
              circle
              plain
              class="el-icon-edit"
              size="mini"
              @click.native.prevent="editRow(scope.$index, scope.row)"
            />
          </template>
        </el-table-column>
      </template>
    </ZlTable>
    <el-dialog :title="title" :visible.sync="show" :append-to-body="true" :close-on-click-modal="false" width="500px">
      <el-form ref="editForm" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="ip" prop="host" class="is-required" maxlength="20">
          <el-input v-model="form.host" clearable autocomplete="off" placeholder="请输入ip" />
        </el-form-item>
        <el-form-item label="封禁时间" prop="createDt" class="is-required">
          <el-date-picker
            v-model="form.createDt"
            value-format="yyyy-MM-dd HH:mm"
            type="datetime"
            placeholder="选择时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="解封时间" prop="releaseDt">
          <el-date-picker
            v-model="form.releaseDt"
            value-format="yyyy-MM-dd HH:mm"
            type="datetime"
            placeholder="选择时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="是否封禁" prop="status">
          <el-switch v-model="form.status" active-color="#ff4949" inactive-color="#409EFF" />
        </el-form-item>
        <el-form-item label="封禁原因" prop="reason" class="is-required">
          <el-input
            v-model="form.reason"
            type="textarea"
            :autosize="{minRows:3,maxRows:4}"
            clearable
            autocomplete="off"
            placeholder="请输入封禁原因"
            maxlength="30"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" :loading="loading" @click="saveData">保 存</el-button>
        <el-button size="small" @click="show = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import ZlTable from '@/components/table/table-con'
import { saveBlackList } from '@/api/sys'
import { validator } from '@/utils/form'
export default {
  name: 'BlackList',
  components: { ZlTable },
  data() {
    return {
      par: {
        ip: '',
      },
      form: {
        
      },
      title: '修改黑名单',
      loading: false,
      show: false
    }
  },
  computed: {
    rules() {
      return {
        host: [
          { validator: validator('notBlank'), message: 'ip不能为空', trigger: ['blur', 'change']},
          { validator: validator('ip'), message: 'ip格式错误', trigger: ['blur', 'change']}
        ],
        reason: [
          { validator: validator('notBlank'), message: '封禁原因不能为空', trigger: ['blur', 'change'] }
        ],
        createDt: [
          { validator: validator('notBlank'), message: '封禁开始时间不能为空', trigger: ['blur', 'change'] }
        ],
        releaseDt: [
          { validator: validator(this.checkReleaseDt), message: '封禁结束时间不能为空', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  mounted() {
  },
  methods: {
    saveData() {
      this.$refs.editForm.validate(r => {
        if (r) {
          this.loading = true
          saveBlackList(this.form).then((r) => {
            this.$message.success('保存成功')
            this.show = false
            this.query()
          }).finally(()=>this.loading = false)
        }
      })
    },
    addData() {
      this.title = '新增黑名单'
      this.show = true
      this.form = { status:true }
      this.$nextTick(() => {
        this.$refs.editForm.clearValidate()
      })
    },
    editRow(index, row) {
      this.title = '修改黑名单'
      console.log(row)
      this.form = this.$util.copy(row)
      this.form.status = this.form.status === 1
      this.show = true
      this.$nextTick(() => {
        this.$refs.editForm.clearValidate()
      })
    },
    checkReleaseDt(){
      if(this.$util.isNotBlank(this.form.releaseDt) && this.$util.isNotBlank(this.form.createDt)){
        return this.form.releaseDt > this.form.createDt ? true : '结束时间必须大于开始时间'
      }
      return true
    },
    query() {
      this.$refs.table.query()
    },
    indexMethod(index) {
      return (this.$refs.table.pageNum - 1) * this.$refs.table.pageSize + index + 1
    }
  }
}
</script>
<style scoped>

</style>
